<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css"
	href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript"
	src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
	<script type="text/javascript">
		// 传统对话框：alert、confirm、prompt
		function alertDialog() {
			alert(" 这是浏览器定义的信息提示框");
		}
		function confirmDialog() {
			var ret = confirm(" 是否要删除该记录?");
			alert(" 选择结果 :" + (ret ? " 是 " : " 否 "));
		}
		function inputDialog() {
			var ret = prompt(" 请输入你的姓名:", "");
			alert(" 你输入的是 :" + ret);
		}
		// Ext.MessageBox 静态类
		function alertExtDialog() {
			Ext.MessageBox.alert("友情提示", "这是浏览器定义的信息提示框");
		}
		function confirmExtDialog() {
			// 获得返回值必须使用回调函数
			// msg缩写
			Ext.Msg.confirm("删除确认", "是否真的要删除该记录?", function(btn) {
				// firebug查看函数参数
				console.dir(arguments);
				alert(" 选择结果 :" + (btn == "yes" ? " 是 " : " 否 "));
			});
		}
		var v = "this is window!";
		var b1 = {
			v : "this is b1!"
		};
		function inputExtDialog() {
			Ext.MessageBox.prompt(" 姓名输入 ", " 请输入你的姓名 :",
					function(button, text) {
						if (button == "ok")
							// this作用域默认指向window
							alert(" 你输入的是 :" + text + this.v);
						else
							alert(" 你放弃了录入 !");
					}
					// 作用域
					, b1, 30, "默认值");
			// 同一时间只能有一个对话框显示在页面上
			// alert(1);
			// Ext.Msg.alert("数据输入", "显示对话框");
		}
		function waitExtDialog() {
			// 返回的也是Ext.Msg
			var ret = Ext.Msg.wait("正在处理中");
			setTimeout(function() {
				// 隐藏
				ret.hide();
			}, 3000);
		}
		function progressExtDialog() {
			var ret = Ext.Msg.progress("处理进度", "进度：");
			var r = 0;
			var timer = setInterval(function() {
				ret.updateProgress(r += 0.1, r * 100 + "%");
			}, 500);
			// 一般是发个ajax请求然后返回结果后再做这个操作
			setTimeout(function() {
				r = 0;
				// 隐藏
				ret.hide();
				clearInterval(timer);
			}, 5000);
		}
		function customExtDialog() {
			// 这个最原始的代码
			Ext.Msg.show({
				title : ' 保存数据 ',
				msg : ' 你已经作了一些数据操作，是否要<b>保存</b>当前内容的修改？ ',
				buttons : Ext.Msg.YESNOCANCEL,
				fn : doSave, // 回调函数
				icon : Ext.MessageBox.QUESTION
			});
		}
		function doSave(button, text) {
			if (button == "yes") {
				// 执行数据保存操作
			} else if (button == "no") {
				// 不保存数据
			} else {
				// 取消当前操作
			}
		}
	</script>
	传统对话框
	<input type="button" onClick="alertDialog();" value=" 信息提示框 " />
	<input type="button" onClick="confirmDialog();" value=" 选择对话框 " />
	<input type="button" onClick="inputDialog();" value=" 录入对话框 " />
	<br> Ext对话框
	<input type="button" onClick="alertExtDialog();" value=" 信息提示框 " />
	<input type="button" onClick="confirmExtDialog();" value=" 选择对话框 " />
	<input type="button" onClick="inputExtDialog();" value=" 录入对话框 " />
	<input type="button" onClick="waitExtDialog();" value=" 等待对话框 " />
	<input type="button" onClick="progressExtDialog();" value=" 进度对话框 " />
	<input type="button" onClick="customExtDialog();" value=" 自定义对话框 " />
</body>
</html>
